<template>
  <div class="manage-container unit-manage">
    <h3>单位管理</h3>
    <div class="flex-row unit-search">
      <el-input class="unit-search-input" v-model="keyword" placeholder="请输入单位名称或单位代码进行搜索"> </el-input>
      <el-button @click="search" type="primary" class="unit-search-btn">搜索</el-button>
      <el-button @click="exportData" type="default" plain class="export-button">导出数据</el-button>
    </div>
    <div class="unit-list">
      <div class="unit-row" v-for="(item, index) in unitList" :key="index">
        <div class="unit-row-head">
          创建时间<span>{{ item.created_at }}</span>
        </div>
        <el-row class="unit-row-info">
          <el-col :span="1"
            ><span class="unit-row-info-index">{{ item.id }}</span></el-col
          >
          <el-col :title="item.unit_name" :span="5">单位名称 {{ item.unit_name }}</el-col>
          <el-col :title="item.unit_code" :span="5">单位代码 {{ item.unit_code }}</el-col>
          <el-col :span="10" style="display: flex; align-items: center">
            <div class="unit-row-info-roles">
              <span class="unit-row-info-role unit-row-info-role--admin">
                <img
                  src="@/assets/img/device/icon_sup.png"
                  class="unit-row-info-icon unit-row-info-icon--admin"
                />超级管理员<span class="unit-row-info-role-count">{{ item.user_count.admin }}个</span>
              </span>
              <span class="unit-row-info-role unit-row-info-role--unit_admin">
                <img
                  src="@/assets/img/device/icon_vip.png"
                  class="unit-row-info-icon unit-row-info-icon--unit_admin"
                />单位管理员<span class="unit-row-info-role-count">{{ item.user_count.unit }}个</span>
              </span>
              <span class="unit-row-info-role unit-row-info-role--normal">
                普通用户<span class="unit-row-info-role-count">{{ item.user_count.user }}个</span>
              </span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="unit-row-edit">
              <span class="text-btn--primary edit" @click="clickDetail(item)">编辑</span>
              <span class="text-btn--warn" @click="clickDelete(item)">删除</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :page-sizes="[15, 20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <!--编辑弹窗 -->
    <unitDialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :id="id"
      @closeDialog="clickDialog"
      @updateList="updateList"
    ></unitDialog>
    <!-- 删除确认 -->
    <el-dialog v-model="deleteVisible" :modal="false" width="20%" draggable>
      <span>删除之后要无法撤销，确定要删除吗？ </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteVisible = false" style="margin-right: 20px">取消</el-button>
          <el-button type="primary" @click="deleteConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue';
import axios from 'axios';
import {ElMessage} from 'element-plus';
import manageApi from '@/api/manage.ts';
import unitDialog from './components/unitManageDialog.vue';

const dialogVisible = ref(false);
const id = ref<number>();
const deleteVisible = ref(false);

// 搜索
const keyword = ref('');
const search = () => {
  getUnitList({keyword: keyword.value});
};
// 导出
const exportData = async () => {
  const exportUrl = `${import.meta.env.VITE_API_URL}/api/unit/export`;
  const data = await axios({
    method: 'get',
    url: exportUrl,
    headers: {
      token: localStorage.getItem('token'),
    },
    params: {keyword: keyword.value},
    responseType: 'blob',
  });
  const url = window.URL.createObjectURL(new Blob([data.data]));
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', '单位列表.xlsx');
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href); // 释放URL 对象
  document.body.removeChild(link);
  link = null;
};
// 编辑
const clickDetail = (item: Object) => {
  id.value = item.id;
  dialogVisible.value = !dialogVisible.value;
};
// 删除
const clickDelete = (item: Object) => {
  deleteVisible.value = !deleteVisible.value;
  id.value = item.id;
};
const deleteConfirm = () => {
  manageApi
    .companyDelete({id: id.value})
    .then((res) => {
      if (res.status === 0) {
        ElMessage.success(res.message);
        getUnitList();
        deleteVisible.value = !deleteVisible.value;
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 编辑弹窗
const clickDialog = () => {
  dialogVisible.value = !dialogVisible.value;
};
// 更新列表
const updateList = () => {
  dialogVisible.value = !dialogVisible.value;
  getUnitList();
};
// 分页相关
const pagination = reactive({
  loading: false,
  total: 100,
  pageSize: 10,
  currentPage: 1,
});
const handleCurrentChange = (e: any) => {
  pagination.currentPage = e;
  getUnitList({page: pagination.currentPage, per_page: pagination.pageSiz, keyword: keyword.value});
};

const handleSizeChange = (e: any) => {
  pagination.pageSiz = e;
  getUnitList({per_page: pagination.pageSiz, keyword: keyword.value});
};

// 列表数据
const unitList = ref([]);
const getUnitList = (params) => {
  pagination.loading = true;
  manageApi
    .companyList(params)
    .then((res) => {
      unitList.value = res.data.data;
      pagination.loading = false;
      pagination.total = res.data.total;
      pagination.pageSize = res.data.per_page;
      pagination.currentPage = res.data.current_page;
    })
    .catch((err) => {
      throw err;
    });
};
onMounted(() => {
  getUnitList();
});
</script>
<style lang="scss" scoped>
@import url('@/assets/css/manage.scss');
.el-input {
  &:deep(.el-input__wrapper) {
    padding: 0;
    padding-left: 16px;
    box-sizing: border-box;
  }
  &:deep(.el-input__suffix-inner) {
    padding: 0;
  }
  &:deep(.el-input__suffix-inner > :first-child) {
    padding: 0;
  }
}
.el-button {
  margin: 0;
  border-radius: 0;
}
.unit-manage {
  padding-right: 0;
}
.unit-search {
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
  box-sizing: border-box;
  &-input {
    width: 552px;
    height: 35px;
  }
  &-btn {
    display: inline-block;
    background-color: #1890ff;
    color: #fff;
    width: 86px;
    height: 36px;
    border-radius: 0;
    &:hover {
      opacity: 0.8;
    }
  }
  .export-button {
    width: 98px;
    height: 36px;
    border-radius: 2px;
    margin-left: 20px;
    color: #1890ff;
    border-color: #1890ff;

    &:hover {
      opacity: 0.6;
    }
  }
}
.unit-list {
  height: calc(100% - 140px);
  margin-top: 20px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 25px;
}
.unit-row {
  padding: 0;
  margin-bottom: 20px;
  font-size: 12px;
  background-color: none;
  border: 1px solid #d0d0d0;
  box-sizing: border-box;

  &:hover {
    background-color: none;
    border: 1px solid #4c96ff;
    border-radius: 4px;
    .unit-row-info {
      background-color: #f5f7fa;
    }
  }

  &-info {
    padding: 0 30px 0 20px;
    color: #999999;
    background-color: #fff;
    border-radius: 0px 0px 4px 4px;
    line-height: 52px;
    font-size: 12px;
    width: 100%;
    &-index {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background: #d8d8d8;
      color: #333333;
      font-size: 13px;
      font-weight: bold;
      text-align: center;
      line-height: 20px;
      cursor: default;
    }

    &-roles {
      display: flex;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-role {
      display: inline-flex;
      flex-direction: row;
      border: 1px solid transparent;
      border-radius: 3px;
      margin-right: 20px;
      padding: 0 10px;
      &-count {
        margin-left: 10px;
        font-weight: bold;
      }
      &--admin {
        background-color: #8390a2;
        border-color: #3d4857;
        color: #fff0d2;
      }
      &--unit_admin {
        background-color: #fff2d5;
        border-color: #d5a02c;
        color: #ff9507;
      }
      &--normal {
        background-color: #d9d9d9;
        border-color: #3d4857;
        color: #666666;
      }
    }

    &-icon {
      margin-right: 8px;
      align-self: center;
    }
  }

  &-edit {
    text-align: end;
    .edit {
      margin-right: 20px;
    }
  }

  &-head {
    padding: 0 30px;
    color: #999999;
    background-color: #e3e5e8;
    border-radius: 4px 4px 0px 0px;
    text-align: end;
    height: 30px;
    line-height: 30px;
    span {
      font-size: 12px;
      color: #333333;
      margin-left: 15px;
    }
  }
  .el-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 10px;
  }
}
</style>
